<template>
  <div>

    <div class="head">
      <div class="headImgbox" @click="userOauth">
        <img src="../../assets/images/default_my1.png" alt="" class="headImg" v-if="!isUserOath">
        <img :src="userImg" alt="" class="headImg" v-if="isUserOath">
      </div>
      <!-- <span v-if="!isUserOath">未授权</span> -->
      <span>{{nickname}}</span>

      <div class="clickarrows" @click="$router.push('personal')">
        <img src="../../assets/images/right_my_name_big.png" alt="" class="arrows">
      </div>
    </div>

    <div class="box" @click="showcode" v-if="!isWechatAttention" style="text-align: center">
      <div class="attention" style="display: inline-block">关注威泽官方公众号，享更多增值服务></div>
    </div>

    <div class="null" v-if="productList.length == 0">
      <img src="../../assets/images/images_my_none.png" alt="" class="nullbox">
      <p>您还未绑定任何产品，请先绑定产品</p>
    </div>

    <div class="details" v-for="(data,index) in productList" :key="index">
      <img :src="data.img" alt="" class="detailsImg">
      <div class="fl">
        <h6>{{data.name}}</h6>
        <p>零售价：¥ {{data.price}}</p>
        <p>防伪码：{{data.code}}</p>
        <div class="time">绑定时间：{{data.detaline}}</div>
        <div class="btns">
          <span class="look" @click="lookimg(data.invoice_img)">查看已上传发票</span>
          <span class="btn" :class="{'aftersale': data.status == 1}" @click="locationApp(data)">
            {{data.status == 1 ? '售后中' : '申请售后'}}
          </span>
        </div>
      </div>
    </div>

    <div class="cover" v-show="showbox" @click="hidebig('box')">
      <div class="productImg" v-show="showimg">
        <!-- 查看发票 -->
        <img :src="productImg" alt="" width="100%" class="floatImg">
      </div>
      <div class="coverbox" v-show="hide">
        <img src="../../assets/images/ewm_my-toast.png" alt="" class="codeImg">
        <!-- 关闭按钮 -->
        <img src="../../assets/images/close_my_toast.png" alt="" class="del" @click="hidebig">
        <p>长按识别二维码</p>
      </div>
    </div>

    <foot page='product'></foot>
    <toast :type="type" v-show="load">{{msg}}</toast>
  </div>
</template>

<script>
import foot from "../public/foot";
import toast from "../loading/loading";
export default {
  components: {
    foot,
    toast
  },
  data() {
    return {
      hide: false,
      productList: [],
      showimg: false,
      showbox: false,
      productImg: "",
      userId: "",
      userImg: "",
      nickname: "",
      isUserOath: false,
      isWechatAttention: true,
      msg: "加载中",
      type: "loading",
      load: false
    };
  },
  computed: {
    stateProduct() {
      return this.$store.getters.product;
    },
    stateUserinfo() {
      return this.$store.getters.useinfo;
    },
    statewechat() {
      return this.$store.getters.wechat;
    }
  },
  mounted() {
    var that = this;
    var cookie = document.cookie.split(";");
    var cookies = [];
    for (var i = 0; i < cookie.length; i++) {
      var temp = cookie[i].trim().split("=");
      cookies[temp[0]] = temp[1];
    }
    // console.log(cookies);
    var id = cookies["id"];
    // alert(id);
    if (!id) {
      window.location.href = "http://wztest.wofew.com/api/Main/login";
    } else {
      if (this.stateProduct) {
        this.productList = this.stateProduct;
      }
      if (this.stateUserinfo) {
        that.userImg = this.stateUserinfo.img;
        that.nickname = this.stateUserinfo.nickname;
        that.isUserOath = this.stateUserinfo.isUserOath;
      }
      this.isWechatAttention = this.statewechat;
      this.userId = id;
      this.getProduct();
      this.getWechatUserInfo();
      this.isAttention();
    }

    // this.userLogin();
  },
  methods: {
    locationApp(data) {
      var that = this;
      if (data.status != 1) {
        that.$router.push({
          path: "applyfor",
          query: { product: JSON.stringify(data), code: data.code }
        });
      } else {
        that.$router.push({
          path: "details",
          query: {
            orderId: data.a_sale_id
          }
        });
      }
    },
    getProduct() {
      var that = this;
      this.load = true;
      $.ajax({
        type: "get",
        data: {
          user_id: that.userId
        },
        url: `${this.$store.state.globalIp}/api/Main/bind_list`,
        dataType: "json",
        success(result) {
          that.load = false;
          if (result.message == "成功") {
            that.productList = result.data;
            that.$store.commit("setProduct", result.data);
          }
        }
      });
    },
    getWechatUserInfo() {
      // if (this.userImg.length > 0) {
      //   return;
      // }
      var that = this;
      $.ajax({
        type: "get",
        data: {
          user_id: that.userId
        },
        url: `${this.$store.state.globalIp}/api/Main/wx_msg`,
        dataType: "json",
        success(result) {
          if (result.message == "成功") {
            that.userImg = result.data.img
              ? result.data.img
              : "../../assets/images/default_my1.png";
            that.nickname = result.data.nickname
              ? result.data.nickname
              : "未授权";
            if (result.data.nickname) {
              that.isUserOath = true;
              var data = result.data;
              data.isUserOath = that.isUserOath;
              that.$store.commit("setUserinfo", data);
            }
          }
        }
      });
    },
    userOauth() {
      if (this.isUserOath) {
        return;
      }
      window.location.href = `${
        this.$store.state.globalIp
      }/api/Main/take_user_msg`;
    },
    isAttention() {
      var that = this;
      $.ajax({
        type: "get",
        data: {
          id: that.userId
        },
        url: `${this.$store.state.globalIp}/api/Main/is_attention`,
        dataType: "json",
        success(result) {
          if (result.message == "成功") {
            that.isWechatAttention = result.data.status == 1 ? true : false;
            that.$store.commit("loginstatus", that.isWechatAttention);
          }
        }
      });
    },
    // userLogin() {
    //   var that = this;
    //   $.ajax({
    //     type: "get",
    //     url: `${this.$store.state.globalIp}/api/Main/login`,
    //     data: {},
    //     dataType: "json",
    //     success(result) {
    //       if (result.message == "成功") {
    //         var data = result.data;
    //         //在这里得到id
    //         var id = result.data.id;
    //         that.userId = id;
    //         that.getProduct();
    //       } else {
    //       }
    //     }
    //   });
    // },
    lookimg(data) {
      this.productImg = data;
      this.showbox = true;
      this.showimg = true;
    },
    hidebig(target) {
      if (target == "box" && this.hide) {
        return;
      }
      this.showimg = false;
      this.showbox = false;
      this.hide = false;
    },
    showcode() {
      this.showbox = true;
      this.hide = true;
    }
  }
};
</script>

<style scoped>
.null {
  width: 100%;
  height: 100%;
}
.nullbox {
  display: block;
  width: 103px;
  height: 100px;
  margin-top: 100px;
  margin-left: 136px;
}
.null p {
  font-size: 0.373333rem;
  font-family: PingFangSC-Regular;
  color: #333;
  width: 100%;
  height: 100%;
  margin-top: 10px;
  text-align: center;
}

.head {
  width: 351px;
  height: 84px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  margin-bottom: -2px;
}
.box {
  width: 351px;
  /* height: 34px; */
  background: rgba(255, 255, 255, 1);
  border-radius: 0px 0px 5px 5px;
  margin: 0 12px;
}
.attention {
  width: 303px;
  /* height: 34px; */
  background: rgba(0, 0, 0, 1);
  border-radius: 5px 5px 0px 0px;
  font-size: 12px;
  font-family: PingFangSC-Regular;
  color: rgba(254, 206, 67, 1);
  line-height: 34px;
}
.headImgbox {
  float: left;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #eeeeee;
  margin: 12px;
}
.headImg {
  float: left;
  display: inline-block;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.head span {
  float: left;
  display: inline-block;
  font-size: 20px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  width: 120px;
  height: 60px;
  line-height: 60px;
  margin-top: 10px;
}
.arrows {
  float: left;
  width: 10px;
  height: 18px;
  margin-top: 33px;
  margin-left: 105px;
}
.clickarrows {
  width: 120px;
  height: 70px;
  display: inline-block;
}
.details {
  width: 351px;
  /* height: 174px; */
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin: 12px;
  padding-bottom: 10px;
}
.detailsImg {
  float: left;
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 12px 12px 62px 12px;
}
.fl {
  /* float: left; */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}
.fl h6 {
  font-size: 14px;
  font-family: PingFangSC-Medium;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 12px;
}
.fl p {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  line-height: 20px;
  margin-top: 8px;
}
.time {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(153, 153, 153, 1);
  line-height: 20px;
  margin-top: 8px;
}
.btns {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}
.look {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* width: 110px; */
  color: rgba(51, 51, 51, 1);
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 1);
  margin-top: 16px;
  padding: 3px 5px;
  font-size: 14px;
  margin-right: 10px;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  padding: 3px 0;
  font-size: 14px;
  border-radius: 5px;
  color: rgba(51, 51, 51, 1);
  border: 1px solid rgba(0, 0, 0, 1);
  margin-top: 16px;
}
.btn a {
  text-decoration: none;
  color: rgba(51, 51, 51, 1);
  font-size: 14px;
}
.cover {
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0, 0.4);
  left: 0;
  top: 0;
}
.coverbox {
  width: 200px;
  height: 232px;
  background: rgba(255, 255, 255, 1);
  border-radius: 5px;
  margin-top: 154px;
  margin-left: 88px;
}
.coverbox .codeImg {
  display: block;
  width: 128px;
  height: 128px;
  position: absolute;
  margin-top: 36px;
  margin-left: 36px;
}
.coverbox .del {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  margin-left: 170px;
  margin-top: 10px;
}
.coverbox p {
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(51, 51, 51, 1);
  position: absolute;
  margin-top: 180px;
  margin-left: 51px;
}

.imgcover {
  position: fixed;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
}

.productImg {
  width: 100%;
  height: 30%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

.floatImg {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.aftersale {
  border-color: #ff5d20;
  color: #ff5d20;
}
</style>
